<template>
	<div class="main">
		<ul class="tab">
			<li @click="goto(1)">
				<span>单项</span>
			</li>
			<li @click="goto(2)">
				<span>综合</span>
			</li>
			<li @click="goto(3)">
				<span class="active">历史趋势分析</span>
			</li>
		</ul>
		<div class="mybody">
			<div class="title">综合分数趋势</div>
			<div id="myChart" style="width: 100%;height:300px;"></div>
			<ul class="list">
				<li class="first">
					<b class="left">时间</b>
					<b class="middle">综合分数</b>
					<b class="right">得分</b>
				</li>
				<li v-for="item in formData" :key="item.zonghe">
					<span class="left">{{item.annual}}</span>
					<span class="middle">{{item.zonghe}}</span>
					<span class="right">{{item.scores}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
	data () {
		return {
			formData:[],
			x:[],
			y:[],
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/tzHistory',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
				}
			})
			.then(res=>{
				console.log(res);
				if(res.data.code == 1){
					this.formData = res.data.data;
					this.formData.map(o=>{
						this.x.push(o.annual);
						this.y.push(o.zonghe);
					})
					this.myEcharts(); //初始化图表
				}
			})
		},
		//初始化图表
		myEcharts:function(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				xAxis: {
					type: 'category',
					data: this.x
				},
				yAxis: {
					type: 'value'
				},
				grid:{
					left:'3%',
					top:'3%',
					right:'3%',
					bottom:'3%',
					containLabel:true
				},
				series: [{
					data: this.y,
					type: 'bar',
					itemStyle:{
						normal:{
							color:'#2082FF'
						}
					}
				}]
			});
		},
		//跳转
		goto:function(n){
			if(n == 1){
				this.$router.replace({path:"/single"});
			}
			else if(n == 2){
				this.$router.replace({path:"/syn"});
			}
			else if(n == 3){

			}
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "体质数据";
	}
}
</script>

<style lang="scss" scoped>
	.mybody{
		margin-top: 10px;
		background-color: #fff;
		padding: 15px;
		.title{
			border-left: 4px solid #06AC52;
			height: 20px;
			line-height: 20px;
			padding-left: 10px;
			margin-left: 10px;
			margin-bottom: 15px;
			color: #000;
		}
		.list{
			box-shadow: 0 0 10px #ccc;
			padding: 10px 0;
			border-radius: 8px;
			margin-top: 20px;
			li{
				display: flex;
				align-items: center;
				padding: 10px 0;
				.left{
					width: 33.3%;
					text-align: center;
				}
				.middle{
					width: 33.3%;
					text-align: center;
				}
				.right{
					width: 33.3%;
					text-align: center;
				}
			}
			.first{
				border-bottom: 1px solid #eee;
			}
		}
	}
</style>
